<template>
    <el-card class="app-container" v-loading="detailLoading">
        <template #header>
            <div class="head-container flex">
                <p >{{cabinetObj?.name}} 号柜</p>
                <el-button type="primary" link @click="back">返回</el-button>
            </div>
        </template>
        <div class="cabinet-detail">
            <div class="detail-row" v-for="(item,index) in DetailList" :key="index">
                <div class="detail-col">
                    <span class="label">{{index}}层</span>
                </div>
                <div class="detail-col" v-for="(item2,index2) in item" :key="index2" :class="{'ColActive':item2.hasFile == 1}" @click="handleDetail(item2)"> 
                    <span class="label">{{index2+1}}盒</span>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CabinetDetail } from "@/api/user";

const route = useRoute();
const router = useRouter();
const cabinetId = ref(route.params.id);
const detailLoading = ref(false);
const DetailList = ref([]);
const cabinetObj = ref({});
onMounted(()=>{
    cabinetObj.value = JSON.parse(localStorage.getItem('cabinetObj'));
    getCabinetDetail();
})
onUnmounted(()=>{
    // localStorage.removeItem('cabinetObj');
})
const handleDetail = (item)=>{
    if(item.hasFile == 0){
        router.push({
            path:'/projectDigital/addProject',
            query:{
                cabinetId:item.cabinetId,
                boxId:item.id,
            }
        })
    }else{
        router.push({
            path:'/filingCabinet/boxdetail',
            query:{
                projectIds:item.projectIds,
                cabinetId:item.cabinetId,
                boxId:item.id,
            }
        })
    }
}   
const back = ()=>{
    router.back();
}
const getCabinetDetail = async () =>{
    detailLoading.value = true;
    let res = await CabinetDetail({cabinetId:cabinetId.value});
    detailLoading.value = false;
    if(res.errorCode == 0) {
        DetailList.value = res.data;
    }
}
</script>

<style lang="scss" scoped>
.head-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    p{
        font-weight: 600;
        font-size: 18px;
    }
}
.app-container{
    :deep(.el-card__body){
        overflow: auto;
    }
}
.cabinet-detail{
    min-height: 200px;
    margin: 0 auto;
    width: max-content;
    .detail-row{
        display: flex;
        font-size: 18px;
        .detail-col{
            width: 75px;
            height: 55px;
            font-size: 16px;
            border: 1px solid rgba(64,158,255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba($color: #ccc, $alpha: 0.5);
            cursor: pointer;
            &+.detail-col{
                border-left: none;
            }
            &.ColActive{
                background: red;
                color: #fff;
            }
            &:first-child{
                background: rgba(64,158,255, 0.3);
                color: #000;
                font-weight: 600;
                border-color: rgba(64,158,255, 0.3);
                cursor: text;
            }
            &+.detail-row{
                .detail-col{
                    border-top: none;
                }
            }
        }
    }
}
</style>